<template>
  <div class="square">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">约伴广场</span>
    </div>
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <div class="square-list">
          <ChaperoneItem
            v-for="(ch, index) in squareList"
            :key="index"
            :head_url="ch.send_user && ch.send_user.avatar"
            :nick_name="ch.send_user.name"
            :release_time="ch.timestamp"
            :address="(ch.business && ch.business.city + ch.business.name) || ''"
            :content="ch.content"
            :count="ch.feed && ch.feed.likes"
            :end_time="ch.feed && ch.feed.time"
            :text="ch.feed && ch.feed.reason_text"
            :title="ch.feed && ch.feed.tiny_title"
            :feed_url="ch.feed && ch.feed.covers && ch.feed.covers[0].url"
            :sex_type="ch.sex_type ? ch.sex_type : 0"
            :invitation_time="ch.invitation_time ? ch.invitation_time : 0"
            :fee_type="ch.fee_type ? ch.fee_type : 0"
            :like_count="ch.like_count"
            :person_count_type="ch.person_count_type ? 2 : 1"
            :id="ch.feed && ch.feed.id"
            :user_id="ch.send_user && ch.send_user.id"
            :bus_id="ch.business && ch.business.id"
          ></ChaperoneItem>
        </div>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import RefreshList from '../activity/public-component/RefreshList.vue'
import ChaperoneItem from './ChaperoneItem.vue'
import axios from '@/utils/request'
export default {
  components: {
    RefreshList,
    ChaperoneItem
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      page: 1,
      squareList: [] // 广场数据
    }
  },
  methods: {
    // 请求约伴广场数据
    async requestSquareDataList() {
      /*
      请求地址：https://api.xmonster.cn/v2/invitations
      请求方式：get
      请求参数：
      params:{
        feed_id: 0,
        limit: 1   翻页
      }
      */
      const data = await axios.get('/v2/invitations', {
        params: {
          feed_id: 0,
          page: this.page
        }
      })
      if (data.length > 0) {
        this.status.loading = false
        this.status.finished = false
        this.squareList = [...this.squareList, ...data]
      } else {
        this.status.finished = true
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.squareList = []
      await this.requestSquareDataList()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestSquareDataList()
      this.status.loading = false
    }
  },
  async created() {
    const Toast = this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中...'
    })
    try {
      await this.requestSquareDataList()
    } catch {
      Toast.clear()
      this.$toast.fail('请检查网络！')
    } finally {
      Toast.clear()
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.square {
  padding-top: 46px;

  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      margin-left: 10px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close {
      height: 30px;
      width: 30px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        transform: rotate(180deg);
        height: 20px;
        width: 20px;
      }
    }
  }
  .square-list {
    padding: 10px;
  }
}
</style>
